import Vue from 'vue'
import Vuex from 'vuex'

import storage from 'store'
import remove from 'lodash.remove'
// 引入两个依赖
Vue.use(Vuex)

const store = {
  state: {
    shuliang: 1,
    baozheng: [
      {
        img:require("../assets/shop/car001.jpg"),
        
        money: "￥99",
        miaoshu:  "阿道夫无硅油洗护组合两件套 无硅油洗发",
        
        id: 1,
      },
      {
        img:
        require("../assets/shop/car002.jpg"),
        money: "￥39",
        miaoshu: "阿道夫烟酰胺香感焕亮磨砂膏 160g",
        id: 2,
      },

      {
        img:
        require("../assets/shop/car003.jpg"),
        money: "￥88",
        miaoshu:  "阿道夫无硅油洗沐组合两件套 袪屑",
        id: 3,
      },
      {
        img:
        require("../assets/shop/car004.jpg"),
        money: "￥69",
        miaoshu: "阿道夫 护发精油凝润修护100ml",
        id: 4,
      },
      {
        img:
        require("../assets/shop/car005.jpg"),
        money: "￥39",
        miaoshu: "阿道夫（ADOLPH） 阿道夫精油洗护专研精油(玫瑰奇焕亮发)75g",
        id: 5,
      },
      {
        img:
        require("../assets/shop/car006.jpg"),
        money: "￥88",
        miaoshu: "阿道夫无硅油洗发水袪屑控油舒缓滋养 无硅油洗发水500g*2 ",
        id: 6,
      },
      {
        img:
        require("../assets/shop/car007.jpg"),
        money: "￥59",
        miaoshu: "阿道夫焗油宝 损伤修护焗油膏免蒸发膜倒膜留香260g/瓶 焗油宝260g*2",
        id: 7,
      },
      {
        img:
        require("../assets/shop/car008.jpg"),
        money: "￥48",
        miaoshu:  "阿道夫（ADOLPH） 洗发水净屑舒爽/修护滋养/控油清爽/亮泽丝滑",
        id: 8,
      },
      {
        img:
        require("../assets/shop/car009.jpg"),
        money: "￥62",
        miaoshu: "阿道夫（ADOLPH） 洗护套装 洗发水护发乳组合两件套248ml*2",
        id: 9,
      },
      {
        img:
        require("../assets/shop/car0010.jpg"),
        money: "￥108",
        miaoshu:  "阿道夫（ADOLPH）生姜防脱育发洗发水500ml 生姜洗发水500ml*2瓶",
        id: 10,
      },
      {
        img:
        require("../assets/shop/car0011.jpg"),
        money: "￥88",
        miaoshu:
        "阿道夫阿道夫洗护两件套 洗发水护发乳套装洗发露洗发乳男女通用 ",
        id: 11,
      },
      {
        img:
        require("../assets/shop/car0012.jpg"),
        money: "￥109",
        miaoshu: "阿道夫洗发水沐浴露护发素520ml*2控油去屑留香洗发水套装洗头膏",
        id: 12,
      },
      {
        img:
        require("../assets/shop/car0013.jpg"),
        money: "￥55",
        miaoshu: "阿道夫 洗发水净屑舒爽/修护滋养/控油清爽/亮泽丝滑/520ml ",
        id: 13,
      },
      {
        img:
        require("../assets/shop/car0017.jpg"),
        money: "￥99",
        miaoshu: "洗发水护发素套装袪屑控油保湿滋润家庭装男女通用持久留香......................养发留香值得购买男人爱女人喜",
        id: 14,
      },
      {
        img:
        require("../assets/shop/car0018.jpg"),
        money: "￥99",
        miaoshu:"阿道夫烟酰胺香感焕亮磨砂膏 去屑不伤发护发修护养发你值得拥有赶快购买160g",
        id: 15,
      },
      {
        img:
        require("../assets/shop/car0019.jpg"),
        money: "￥45",
        miaoshu: "阿道夫（ADOLPH）阿道夫 护发精油凝润修护100ml",
        id: 16,
      },
    ], //抱枕的数据
    guahua: [
      {
        img:
        require("../assets/shop/car0020.jpg"),
        money: "￥66",
        miaoshu: "阿道夫 护发精油凝润修护100ml",
        id:17,
      },
      {
        img:
        require("../assets/shop/car0021.jpg"),
        money: "￥99",
        miaoshu: " 阿道夫精油洗护专研精油",
        id:18,
      },
      {
        img:
        require("../assets/shop/car0022.jpg"),
        money: "￥88",
        miaoshu: "阿道夫无硅油洗发水袪屑控油舒缓滋养 ",
        id:19,
      },
      {
        img:
        require("../assets/shop/car0023.jpg"),
        money: "￥99.9",
        miaoshu: "损伤修护焗油膏免蒸发膜倒膜留香260g/瓶 焗油宝260g*2",
        id:20,
      },
      {
        img:
        require("../assets/shop/car0024.jpg"),
        money: "￥55",
        miaoshu: "洗发露洗发乳男女通用 祛屑舒爽洗发水248ml+植萃精华护发素",
        id:21,
      },
      {
        img:
        require("../assets/shop/car0025.jpg"),
        money: "￥79.9",
        miaoshu: " 洗发水净屑舒爽/修护滋养/控油清爽/亮泽丝滑/精粹修护香氛精油系",
        id:22,
      },
      {
        img:
        require("../assets/shop/car0026.jpg"),
        money: "￥59.9",
        miaoshu:  "阿道夫（ADOLPH）生姜防脱育发洗发水500ml 生姜洗发水500ml*2瓶",
        id:23,
      },
      {
        img:
        require("../assets/shop/car0027.jpg"),
        money: "￥89",
        miaoshu: "阿道夫（ADOLPH） 阿道夫洗护两件套 洗发水护发乳套装洗发露洗发乳",
        id:24,
      },
      {
        img:
        require("../assets/shop/car0028.jpg"),
        money: "￥69",
        miaoshu: "阿道夫洗发水沐浴露护发素520ml*2控油去屑留香洗发水套装洗头膏",
        id:25,
      },
      {
        img:
        require("../assets/shop/car0029.jpg"),
        money: "￥84",
        miaoshu: "阿道夫（ADOLPH） 洗发水净屑舒爽/修护滋养/控油清爽/亮泽丝滑",
        id:26,
      },
      {
        img:
        require("../assets/shop/car0030.jpg"),
        money: "￥77",
        miaoshu: " 阿道夫无硅油洗护组合两件套 洗发水护发素套装袪屑控油保湿滋润",
        id:27,
      },
      {
        img:
        require("../assets/shop/car0031.jpg"),
        money: "￥99",
        miaoshu: "阿道夫（ADOLPH） 阿道夫洗护两件套 洗发水护发乳套装洗发露",
        id:28,
      },
      {
        img:
        require("../assets/shop/car0032.jpg"),
        money: "￥69",
        miaoshu: "阿道夫无硅油洗沐组合两件套 袪屑控油 无硅油洗发水500g+沐浴露420ml ",
        id:29,
      },
      {
        img:
        require("../assets/shop/car0033.jpg"),
        money: "￥94",
        miaoshu: "阿道夫 护发精油凝润修护去屑是大大大大大100ml",
        id:30,
      },
      {
        img:
        require("../assets/shop/car0034.jpg"),
        money: "￥78",
        miaoshu: "阿道夫（ADOLPH） 阿道夫精油洗护专研精油(玫瑰奇焕亮发)75g",
        id:31,
      },
      {
        img:
        require("../assets/shop/car0035.jpg"),
        money: "￥66.6",
        miaoshu: "无硅去油去屑护发",
        id:32,
      },
      {
        img:
        require("../assets/shop/car0036.jpg"),
        money: "￥98",
        miaoshu: "阿道夫焗油宝 损伤修护焗油膏免蒸发膜倒膜留香",
        id:33,
      },
      {
        img:
        require("../assets/shop/car0037.jpg"),
        money: "￥9.99",
        miaoshu: "阿道夫（ADOLPH） 洗发水净屑舒爽/修护滋养/控油清爽/亮泽丝滑/精粹修护",
        id:34,
      },
      {
        img:
        require("../assets/shop/car0038.jpg"),
        money: "￥85",
        miaoshu: "阿道夫（ADOLPH） 洗护套装 洗发水护发乳组合两件套248ml*2 ",
        id:35,
      },
      {
        img:
        require("../assets/shop/car0039.jpg"),
        money: "￥88",
        miaoshu: "阿道夫（ADOLPH）生姜防脱育发洗发水500ml 生姜洗发水500ml*2瓶大大大啊啊大",
        id:36,
      },
      {
        img:
        require("../assets/shop/car0040.jpg"),
        money: "￥123",
        miaoshu: "阿道夫（ADOLPH）",
        id:37,
      },
      {
        img:
        require("../assets/shop/car0041.jpg"),
        money: "￥156",
        miaoshu: "阿道夫洗发水沐浴露护发素520ml*2控油去屑留香洗发水套装洗头膏洗发露洗发香乳男女士",
        id:38,
      },
      {
        img:
        require("../assets/shop/car0042.jpg"),
        money: "￥259",
        miaoshu: " 洗发水净屑舒爽",
        id:39,
      },
      {
        img:
        require("../assets/shop/car0043.jpg"),
        money: "￥189",
        miaoshu: "阿道夫无硅油洗护组合两件套 洗发水护发素套装袪屑控油保湿滋润打打ad啊 啊",
        id:40,
      },
    ], //挂画的数据
    dengshen: [
      {
        img:
        require("../assets/shop/car0044.jpg"),
        money: "￥296",
        miaoshu: "阿道夫无硅油洗沐组合两件套 袪屑控油 无硅油洗发水500g+沐浴露420ml",
        id:41,
      },
      {
        img:
        require("../assets/shop/car0045.jpg"),
        money: "￥89",
        miaoshu: "阿道夫无硅油洗沐组合两件套 袪屑控油 无硅油洗发水500g+沐浴露420ml",
        id:42,
      },
      {
        img:
        require("../assets/shop/car0046.jpg"),
        money: "￥120",
        miaoshu:
          "阿道夫 护发精油凝润修护100ml生发专用女士专用",
          id:43,
      },
      {
        img:
        require("../assets/shop/car0047.jpg"),
        money: "￥187",
        miaoshu: "阿道夫（ADOLPH） 阿道夫精油洗护专研精油(玫瑰奇焕亮发)75g",
        id:44,
      },
      {
        img:
        require("../assets/shop/car0048.jpg"),
        money: "￥796",
        miaoshu:
          "阿道夫无硅油洗发水袪屑控油舒缓滋养 无硅油洗发水500g*2 控油清爽/亮泽丝滑控油清爽/亮泽丝滑控油清爽/亮泽丝滑亮泽丝滑控油清爽/亮泽丝",
          id:45,
      },
      {
        img:
        require("../assets/shop/car0050.jpg"),
        money: "￥48",
        miaoshu: "洗发水净屑舒爽/修护滋养/控油清爽/亮泽丝滑",
        id:46,
      },
      {
        img:
        require("../assets/shop/car0049.jpg"),
        money: "￥140",
        miaoshu: "阿道夫焗油宝 损伤修护焗油膏免蒸发膜倒膜留香260g/瓶 焗油宝260g*2元等身抱枕套宅男睡觉长靠垫洗发水护发乳组合两件套248ml*2 洗发露洗发乳男女通用 祛屑大大大 阿达",
        id:47,
      },
      {
        img:
        require("../assets/shop/car0051.jpg"),
        money: "￥556",
        miaoshu: "洗护套装 ",
        id:48,
      },
      {
        img:
        require("../assets/shop/car0052.jpg"),
        money: "￥158",
        miaoshu:
        "阿道夫（ADOLPH）生姜防脱育发洗发水500ml 生姜洗发水500ml*2瓶",
          id:49,
      },
      {
        img:
        require("../assets/shop/car0053.jpg"),
        money: "￥48",
        miaoshu: "洗发水护发乳套装洗发露洗发乳男女通用 祛屑舒爽+植萃精华 420ml",
        id:50,
      },
      {
        img:
        require("../assets/shop/car0054.jpg"),
        money: "￥889",
        miaoshu: "控油去屑留香洗发水套装洗头膏洗发露打打打打  阿达      洗发香乳男女士 净屑舒爽洗发水520ml单瓶装 洗发香乳(净屑舒爽)520ml一瓶",
        id:51,
      },
      {
        img:
        require("../assets/shop/car0055.jpg"),
        money: "￥489",
        miaoshu: "控油清爽亮泽丝滑",
        id:52,
      },
      {
        img:
        require("../assets/shop/car0056.jpg"),
        money: "￥456",
        miaoshu: "保湿滋润家庭装男女通用",
        id:53,
      },
      {
        img:
        require("../assets/shop/car0057.jpg"),
        money: "￥459",
        miaoshu: "阿道夫烟酰胺香感焕亮磨砂膏 160g        打打啊啊 啊 崩坏3同人学园观星等身抱枕",
        id:54,
      },
      {
        img:
        require("../assets/shop/car0058.jpg"),
        money: "￥789",
        miaoshu: "阿道夫无硅油洗沐组合两件套 袪屑控油 无硅油洗发水500g发水500g+沐浴露420ml",
        id:55,
      },
      {
        img:
        require("../assets/shop/car0059.jpg"),
        money: "￥156",
        miaoshu: "阿道夫无硅油洗沐组合两件套 袪屑控油 无硅油洗",
        id:56,
      },
      {
        img:
        require("../assets/shop/car0060.jpg"),
        money: "￥369",
        miaoshu: "阿道夫（ADOLPH） 阿道夫精油洗护专研精油(玫瑰奇焕亮发)75g",
        id:57,
      },
      {
        img:
        require("../assets/shop/car0061.jpg"),
        money: "￥486",
        miaoshu: "阿道夫无硅油洗发水袪屑控油舒缓滋养 无硅油洗发水500g*2 ",
        id:58,
      },
      {
        img:
        require("../assets/shop/car0062.jpg"),
        money: "￥158",
        miaoshu: "阿道夫焗油宝 损伤修护焗油膏免蒸发膜倒膜留香260g/瓶 焗油宝260g*2",
        id:59,
      },
      {
        img:
        require("../assets/shop/car0063.jpg"),
        money: "￥589",
        miaoshu: "洗发水净屑舒爽/修护滋养/控油清爽/亮泽丝滑/精粹修护香",
        id:60,
      },
    ], //等身抱枕的数据
    kezi: [
      {
        img:
        require("../assets/shop/car0063.jpg"),
        money: "￥736",
        miaoshu: "去油去屑有永久买单买过就不好其他品牌的洗发水发",
        id:70,
      },
      {
        img:
        require("../assets/shop/car0065.jpg"),
        money: "￥231",
        miaoshu: "阿道夫，只用过一次就放弃其他品牌的洗发水打打打打  打",
        id:71,
      },
      {
        img:
        require("../assets/shop/car0064.jpg"),
        money: "￥456",
        miaoshu: "还在用传统洗发水吗?阿道夫无硅油配方，让你的秀发芳香顺滑",
        id:72,
      },
      {
        img:
        require("../assets/shop/car0064.jpg"),
        money: "￥59",
        miaoshu: "还在用传统洗发水吗?阿道夫无硅油配方，让你的秀发芳香顺滑",
        id:73,
      },
      {
        img:
        require("../assets/shop/car0066.jpg"),
        money: "￥85",
        miaoshu: "姜汁系列，阿道夫洗发水，防掉发，牢固发根，对应正确的洗护方法，尽量避免头发受到不必要的伤害!",
        id:74,
      },
      {
        img:
        require("../assets/shop/car0067.jpg"),
        money: "￥96",
        miaoshu: "牢固发根，对应正确的洗护方法，尽量避免头发受到不必要的伤害动漫手机壳适用华为p40/p30pro玻璃9x",
        id:75,
      },
      {
        img:
        require("../assets/shop/car0068.jpg"),
        money: "￥96",
        miaoshu: "从自身出发，根据发质和头皮状态进行选择，德国阿道夫世界品质!壳适用华为p40/p30pro玻璃9x",
        id:76,
      },
      {
        img:
        require("../assets/shop/car0069.jpg"),
        money: "￥90",
        miaoshu: "我们要理性地从自身出发，根据发质和头皮状态进行选择，德国阿道夫世界品质!",
        id:77,
      },
      {
        img:
        require("../assets/shop/car0070.jpg"),
        money: "50",
        miaoshu: "阿道夫洗发水不仅有很好的去污能力，还能修复破损的皮肤膜",
        id:78,
      },
      {
        img:
        require("../assets/shop/car0071.jpg"),
        money: "￥98",
        miaoshu: "更健康顺滑有光泽，乳液般质地，用CK提香，留香48小时的洗发水",
        id:79,
      },
      {
        img:
        require("../assets/shop/car0072.jpg"),
        money: "￥954",
        miaoshu: "还能修复破损的皮肤膜，使头发处于一个健康生长环境",
        id:80,
      },
      {
        img:
        require("../assets/shop/car0073.jpg"),
        money: "￥321",
        miaoshu: "表面活性剂起着清洁头发和头皮的作用，当洗发液与水混在一起",
        id:81,
      },
      {
        img:
        require("../assets/shop/car0074.jpg"),
        money: "￥98",
        miaoshu: "去屑止痒",
        id:82,
      },
      {
        img:
        require("../assets/shop/car0075.jpg"),
        money: "￥65",
        miaoshu: "洗发水是指一种具有去头屑功能、 焗油功能和染发等功能的护发产品好用产品",
        id:83,
      },
      {
        img:
        require("../assets/shop/car0076.jpg"),
        money: "￥357",
        miaoshu: "洗发水中含有多种成分，这些成份的综合作用能起到清洁头皮和头发的功能",
        id:84,
      },
      {
        img:
        require("../assets/shop/car0077.jpg"),
        money: "￥158",
        miaoshu: "通常洗发露中最能起作用的成份是表面活性剂，表面活性剂起着清洁头发",
        id:85,
      },
      {
        img:
        require("../assets/shop/car0078.jpg"),
        money: "￥654",
        miaoshu: "德国阿道夫洗发水爱的味道，一辈子也忘不了。",
        id:86,
      },
      {
        img:
        require("../assets/shop/car0079.jpg"),
        money: "￥358",
        miaoshu: "德国阿道夫洗发水爱的味道，一辈子也忘不了。",
        id:87,
      },
      {
        img:
        require("../assets/shop/car0080.jpg"),
        money: "￥654",
        miaoshu: "德国阿道夫洗发水爱的味道，一辈子也忘不了。",
        id:88,
      },
      {
        img:
        require("../assets/shop/car0081.jpg"),
        money: "￥258",
        miaoshu: "德国阿道夫洗发水爱的味道，一辈子也忘不了。",
        id:89,
      },
    ], //手机壳的数据
    dibu: [
      {
        name: "店铺",
        url:
          "https://moeyu.tmall.com/?spm=a1z10.1-b-s.w20333431-21220921600.3.47071ea9dM1lEE&scene=taobao_shop",
      },
      {
        name: "宝贝",
        url:
          "https://moeyu.tmall.com/search.htm?spm=a1z10.1-b-s.w20333431-21220921600.11.47071ea9dM1lEE&search=y&orderType=hotsell_desc&tsearch=y&scene=taobao_shop",
      },
      {
        name: "宅品",
        url:
          "https://moeyu.tmall.com/category-1330115324.htm?spm=a1z10.1-b-s.w20333431-21220921600.6.47071ea9dM1lEE&search=y&catName=%BE%D3%BC%D2%B0%D9%BB%F5&scene=taobao_shop#bd",
      },
      {
        name: "其他",
        url:
          "https://shop109893712.taobao.com/?spm=a230r.7195193.1997079397.2.75335991h0dJ02",
      },
    ], //底部的数据
    gouWuChe: storage.get('GouWuChe') || [],
    //数据都放在新的数组里

  },
  mutations: {
    ADD_GouWuChe(state, payload) {
      console.log('添加购物车数据', payload);
      // 给 payload 处理一下
      const xinShangPin = { ...payload }
      // 扩展
      xinShangPin.updateTime = new Date().getTime()
      xinShangPin.count = 1

      // 拉取 localStorage 数据
      const gouWuChe = storage.get('GouWuChe') || []
      // 找到旧数据
      const shangPin = gouWuChe.find(e => e.id === payload.id)
      if(shangPin) {
        // 已存在，数量加一
        shangPin.count += 1
        shangPin.updateTime = new Date().getTime()
      } else {
        // 不存在，直接push
        gouWuChe.push(xinShangPin)
      }
      // 这里判断当商品已存在时，添加的商品数量加一，当商品不存在时，在结尾处增加商品

      // 按更新时间排序
      gouWuChe.sort((a, b) => a.updateTime - b.updateTime)

      // 更新 vuex 中的状态，触发 vue 数据响应
      state.gouWuChe = gouWuChe
      // 回写 localStorage，将数据保存到浏览器层级
      storage.set('GouWuChe', gouWuChe)
    },
    DEL_GouWuChe(state, payload) {
      console.log('从购物车移除', payload);

      // 拉取 localstorage 数据
      const gouWuChe = storage.get('GouWuChe') || []
      // 移除旧数据
      remove(gouWuChe, e => e.id === payload.id)

      state.gouWuChe = gouWuChe
      storage.set('GouWuChe', gouWuChe)
    },
    INCREMENT_GouWuChe(state, payload) {
      console.log('增加购物车中商品数量', payload);

      // 拉取 localstorage 数据
      const gouWuChe = storage.get('GouWuChe') || []
      // 找到旧数据
      const shangPin = gouWuChe.find(e => e.id === payload.id)
      if(shangPin) {
        // 已存在，数量加一
        shangPin.count += 1
      } else {
        // 不存在，直接push
        gouWuChe.push(payload)
      }

      state.gouWuChe = gouWuChe
      storage.set('GouWuChe', gouWuChe)
    },
    SUB_GouWuChe(state, payload) {
      console.log('减少购物车中商品数量', payload);

      // 拉取 localStorage 数据
      const gouWuChe = storage.get('GouWuChe') || []
      // 找到旧数据
      const shangPin = gouWuChe.find(e => e.id === payload.id)
      if(shangPin) {
        // 已存在，数量减1
        shangPin.count -= 1

        // 若数量 < 1，则应该移除
        if (shangPin.count < 1) {
          // 移除旧数据
          remove(gouWuChe, e => e.id === payload.id)
        }
      }

      state.gouWuChe = gouWuChe
      storage.set('GouWuChe', gouWuChe)
    }
  },
  actions: {
    /**
     * 添加购物车
     * @param {Object} context 
     * @param {Object} payload 
     */
    AddGouWuChe({ commit }, payload) {
      // TODO: 商品判断，例如判断商品下架、优惠券等
      commit('ADD_GouWuChe', payload)
    },
    DelGouWuChe({ commit }, payload) {
      commit('DEL_GouWuChe', payload)
    },
    IncrementGouWuChe({ commit }, payload) {
      commit('INCREMENT_GouWuChe', payload)
    },
    SubGouWuChe({ commit }, payload) {
      commit('SUB_GouWuChe', payload)
    }
  }
}

// 拉取 localStorage 数据
const gouWuChe = storage.get('GouWuChe') || []
// 按更新时间排序
gouWuChe.sort((a, b) => a.updateTime - b.updateTime)
store.state.gouWuChe = gouWuChe

export default new Vuex.Store(store)
